import React, { useEffect, useCallback, useReducer, useState } from 'react';
import { message } from 'antd';
import FormBox from './components/FormBox';
import TableBox from './components/TableBox';
import columns from './components/TableBox/columns';
import Reply from './components/Reply';
import CommentDetails from './components/CommentDetails';
import {
  fetchCommentList,
  fetchCommentDetails,
  fetchCommentReply,
} from '@/services/comment';

import styles from './index.less';

const initState = {
  pagination: { current: 1 },
  tableData: [],
  fromSearch: {},
  total: 0,
};

const commentReducer = (
  state: any,
  action: { type: string; payload?: any },
) => {
  switch (action.type) {
    case 'updatePage':
      return { ...state, pagination: { current: action.payload } };
    case 'updateTable':
      return { ...state, tableData: action.payload };
    case 'updateTotal':
      return { ...state, total: action.payload };
    case 'updateFromSearch':
      return { ...state, fromSearch: action.payload };
    default:
      return state;
  }
};

const comment = () => {
  const [detailVisible, setDetailVisible] = useState<boolean>(false);
  const [commentDetails, setCommentDetails] = useState<any>({});
  const [replyVisible, setReplyVisible] = useState<boolean>(false);
  const [orderId, setOrderId] = useState<number>(0);

  const [state, orderDispatch] = useReducer(commentReducer, initState);

  const getTableData = useCallback(async (body: any) => {
    const { data, meta } = await fetchCommentList(body);
    orderDispatch({ type: 'updateTable', payload: data });
    orderDispatch({ type: 'updateTotal', payload: meta.pagination.total });
  }, []);

  useEffect(() => {
    getTableData({ current: 1 });
  }, []);

  const handleChangePage = useCallback(({ current }) => {
    orderDispatch({ type: 'updatePage', payload: current });
    getTableData({ current, ...state.formSearch });
  }, []);

  const handleDetails = useCallback(async (record) => {
    const res = await fetchCommentDetails(record.id);
    setCommentDetails(res);
    setDetailVisible(true);
  }, []);

  const handleCancel = useCallback(() => {
    setDetailVisible(false);
  }, []);

  const handleReply = useCallback((order) => {
    setOrderId(order.id);
    setReplyVisible(true);
  }, []);

  const handleReplyCancel = useCallback(() => {
    setReplyVisible(false);
  }, []);

  const handleReplySubmit = useCallback(
    async (values) => {
      const res = await fetchCommentReply(orderId, values);
      if (!res) {
        getTableData({ current: 1, include: 'user' });
        orderDispatch({ type: 'updatePage', payload: 1 });
        setReplyVisible(false);
        message.success('发货成功');
      }
    },
    [orderId],
  );

  const getColumns = useCallback(
    () => columns({ handleDetails, handleReply }),
    [columns, handleDetails, handleReply],
  );

  const handleSearch = useCallback((value) => {
    orderDispatch({ type: 'updateFromSearch', payload: value });
    orderDispatch({ type: 'updatePage', payload: 1 });
    getTableData({ current: 1, ...value });
  }, []);

  const handleReset = useCallback(() => {
    orderDispatch({ type: 'updateFromSearch', payload: {} });
    orderDispatch({ type: 'updatePage', payload: 1 });
    getTableData({ current: 1, include: 'user' });
  }, []);

  return (
    <>
      <div className={styles.formBox}>
        <FormBox onSearch={handleSearch} onReset={handleReset} />
      </div>
      <TableBox
        columns={getColumns()}
        data={state.tableData}
        pagination={state.pagination}
        total={state.total}
        onChangePage={handleChangePage}
      />
      <CommentDetails
        isDetailVisible={detailVisible}
        onCancel={handleCancel}
        commentDetails={commentDetails}
      />
      <Reply
        isReplyVisible={replyVisible}
        onCancel={handleReplyCancel}
        onSubmit={handleReplySubmit}
      />
    </>
  );
};

export default comment;
